<template>
    <div class="page">
        <div class="down">
            <div class="row">
                <div v-for="(item,index) in lists" class="row_child_item">
                    <img  class="row_child_item_img"  :src="item.cover"  @click="toViewvideo(index)"/>
                    <div class="row_child_item_all_info">
                        <p class="row_child_item_title">{{item.courseName}}</p>
                        <div class="row_child_item_info">
                            <label class="row_child_item_info_left">{{item.createDate}}</label>
                            <div class="row_child_item_info_right">
                                <div class="row_child_item_info_right_child" @click="toViewvideo(index)">
                                    <img  class="row_child_item_info_right_child_icon" src="../../../assets/bbmg/safe/eye.png"/>
                                    <label class="row_child_item_info_right_child_label">{{item.viewNumber}}</label>
                                </div>
                                <div  class="row_child_item_info_right_child" @click="clickThumb(index)">
                                    <img  class="row_child_item_info_right_child_icon"  src="../../../assets/bbmg/safe/zan.png"/>
                                    <label class="row_child_item_info_right_child_label">{{item.likes}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="more-zp"  @click="toNextPage">查看更多课程 >> </p>
        <div class="down_info">
            <p class="down_red_line_4">    </p>
            <p class="down_red_line_1">    </p>
        </div>
    </div>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import { sessionStorage, cookie } from '../../../common/cacheUtils.js';

    export default {
        data(){
            return {
                currentPage: 1,
                lists:[],
            }
        },
        mounted(){
            this.queryWorks();
        },
        methods:{
            queryWorks(){
                let data = {
                    startPage: this.currentPage,
                    size: 16,
                    conditions: {
                        orgId:sessionStorage('userId').getObject('userId').companyId
                    }
                };
                this.$http.post(Api.queryCourseManagement,data).then(res => {
                    res.data.data.data.forEach(item=>{
                        item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');

                        this.$http.get(Api.interestedPartiesUserFile+"/"+item.id+"/files/picture?field=coursePic").then((res1) => {
                            if(res1.data.data.length >0)
                                this.$set(item,"cover",res1.data.data[0].picture)
                        }).catch(e => {});

                        this.lists.push(item);
                    });
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            clickThumb(index){
                let userId = sessionStorage('userId').getObject('userId').userId;
                this.$http.get(Api.courseThumbs+"?worksId="+this.lists[index].id+"&userId="+userId).then(res => {
                    if(res.data.status == 200){
                        if(res.data.data=='1'){
                            this.lists[index].likes++;
                        }else{
                            this.lists[index].likes--;
                        }
                    }
                })
            },
            toViewvideo(index) {
                let routeUrl = this.$router.resolve({
                    path: "/videoPlay",
                    query: {id:this.lists[index].id,type:1}
                });
                window.open(routeUrl.href, '_blank');
            },
            toNextPage(){
                this.currentPage++;
                this.queryWorks();
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }
</script>

<style scoped>

    .page{
        background: #F4F5F6;
        min-width:100%;
        overflow-y:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        overflow-x:hidden;
    }

    ul {
        list-style-type: none;
    }

    ul li:before{
        display: inline-block;
        content: "▶";
        padding-right: 10px;
        color: #FEA6A5;
        font-size:6px;
        line-height: 32px;
    }

    .down{
        width:100%;
        background: #F4F5F6;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        flex-grow: 1;
    }

    .row{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        width:99%;
        max-width: 1200px;
        background: #F4F5F6;
    }

    .row_child_item{
        margin-top:20px;
        display: flex;
        flex-direction: column;
        width: 24%;
        max-width: 285px;
        height:300px;
        background: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 5px;
    }

    .row_child_item:hover{
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    }

    .row_child_item_img{
        width: 100%;
        height: 220px;
        border-radius: 5px;
    }

    .row_child_item_all_info{
        padding-top:10px;
        padding-bottom: 10px;
        height: 80px;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 12px;
        padding-right: 12px;
    }

    .row_child_item_title{
        width: 210px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .row_child_item_info{
        display: flex;
        justify-content: space-between
    }

    .row_child_item_info_left{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #B3B3B3;
    }

    .row_child_item_info_right{
        width:120px;
        display: flex;
        justify-content: space-around
    }

    .row_child_item_info_right_child{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .row_child_item_info_right_child_icon{
        width: 19px;
        height: 15px;
    }

    .row_child_item_info_right_child_icon:hover{
        cursor: pointer;
    }

    .row_child_item_info_right_child_label{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #B3B3B3;
        margin-left:5px;
    }

    .down_red_line_4{
        margin-top:22px;
        width:1200px;
        height: 4px;
        background-color: red;
    }

    .more-zp{
        margin-top:23px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF8A89;
        line-height: 38px;
    }

    .more-zp:hover{
        cursor: pointer;
    }

    .down_info{
        display: flex;
        flex-direction: column;
        height: 200px;
    }

    .down_red_line_1{
        margin-top:3px;
        width:1200px;
        height: 1px;
        background-color: red;
    }

    .down_company_info{
        margin: 24px;
        width: 1200px;
        height: 13px;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ADADAD;
        line-height: 24px;
    }

    .thumbStatus{
        background-color:red;
        color:red;
    }
</style>